<template>
  <div class="personal-center-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>
    
    <!-- 整合的中央内容区 -->
    <div class="central-content">
      <!-- 用户信息卡片 -->
      <div class="user-info-card">
        <div class="user-header">
          <div class="user-avatar">
            <img src="http://localhost:3004/api/file/getAvatar/1890524956" alt="用户头像" />
          </div>
          <div class="user-details">
            <div class="user-name">
              <span>上班摸鱼的人</span>
              <el-badge :value="isVip" type="success" />
            </div>
            <div class="user-intro">会写前端的后端程序员</div>
          </div>
        </div>
        
        <div class="user-metrics">
          <div class="metric-item" v-for="(metric, index) in userMetrics" :key="index">
            <el-icon :size="18">{{ metric.icon }}</el-icon>
            <span>{{ metric.label }}</span>
            <span class="metric-value">{{ metric.value }}</span>
          </div>
        </div>
      </div>
      
      <div class="tab-content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="发帖" name="post">
            <div class="post-item" v-for="(post, index) in posts" :key="index">
              <div class="post-header">
                <img src="http://localhost:3004/api/file/getAvatar/1890524956" alt="用户头像" class="post-avatar" />
                <div class="post-meta">
                  <span>{{ post.username }}</span>
                  <span class="divider">·</span>
                  <span>{{ post.time }}</span>
                  <span class="divider">·</span>
                  <span>{{ post.location }}</span>
                  <span class="divider">·</span>
                  <span class="category">{{ post.category }}</span>
                </div>
              </div>
              <div class="post-title">{{ post.title }}</div>
              <div class="post-desc">{{ post.desc }}</div>
              <div class="post-metrics">
                <span><el-icon><eye /></el-icon>阅读量：{{ post.views }}</span>
                <span><el-icon><thumbs-up /></el-icon>点赞：{{ post.likes }}</span>
                <span><el-icon><chat-bubble /></el-icon>评论：{{ post.comments }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="评论" name="comment">
            <!-- 评论内容 -->
            <div class="empty-state" v-if="activeTab === 'comment'">
              <img src="https://picsum.photos/seed/empty1/200/150" alt="暂无评论" />
              <p>暂无评论内容</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="点赞" name="like">
            <!-- 点赞内容 -->
            <div class="empty-state" v-if="activeTab === 'like'">
              <img src="https://picsum.photos/seed/empty2/200/150" alt="暂无点赞" />
              <p>暂无点赞内容</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const posts = ref([
      {
        username: '上班摸鱼的人',
        time: '2025-02-12 20:21:21',
        location: '陕西省',
        category: '后端 / Java',
        title: '【后端】图片验证码',
        desc: '图片验证码生成',
        views: 1961,
        likes: 3,
        comments: 1
      },
      {
        username: '上班摸鱼的人',
        time: '2025-02-12 19:09:01',
        location: '陕西省',
        category: '后端 / Java',
        title: '【后端】开发配置pom和logback配置',
        desc: '',
        views: 2019,
        likes: 2,
        comments: '10'
      },
      {
        username: '上班摸鱼的人',
        time: '2025-02-12 16:10:19',
        location: '陕西省',
        category: '前端 / vue',
        title: '发布线上数据初始化',
        desc: '发布线上初始化数据脚本',
        views: 1033,
        likes: 10,
        comments: '12'
      }
    ]);
    
    const activeTab = ref('post');
    const isVip = true;
    
    // 重构用户指标数据
    const userMetrics = ref([
      { label: '积分', value: '2066' },
      {  label: '获赞', value: '467' },
      {  label: '发帖', value: '26' },
      {  label: '加入', value: '2025-01-02' },
      { label: '最后登录', value: '2025-5-23' }
    ]);
    
    return {
      posts,
      activeTab,
      isVip,
      userMetrics
    };
  }
};
</script>

<style scoped>
.personal-center-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f7fa; /* 浅灰色背景 */
}

.central-content {
  background-color: #fff; /* 白色内容区 */
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.user-info-card {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background-color: #fff;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 2px solid #409eff;
}

.user-name {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.user-intro {
  color: #606266;
  font-size: 14px;
}

.user-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.metric-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  flex: 1 1 calc(50% - 15px);
  max-width: calc(50% - 15px);
}

.metric-value {
  margin-left: auto;
  font-weight: 500;
}

.tab-content {
  background-color: #fff;
  border-radius: 6px;
}

.post-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #606266;
}

.divider {
  margin: 0 8px;
  color: #909399;
}

.category {
  color: #409eff;
}

.post-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #303133;
  transition: color 0.2s;
}

.post-title:hover {
  color: #409eff;
}

.post-desc {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.post-metrics {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.post-metrics span {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #909399;
}

.empty-state img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 15px;
  opacity: 0.6;
}

.el-breadcrumb {
    margin-bottom: 10px;
}
</style>